<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <!-- <div class="conres_hed">
                      <span>新活动申请:</span>
                      <span :class="{conres_active:activityType==1}">免费体检活动</span>
                      <span :class="{conres_active:activityType==2}">价格竞猜活动</span>
                      <span :class="{conres_active:activityType==3}">新品首发</span>
                  </div> -->
                  <div v-if="activityType==1" class="yuansdj">
                    <h4 style="margin:20px 0px">活动详情</h4>
                    <el-form label-width="150px" class="demo-ruleForm">
                      <el-form-item label="活动编码:">
                        {{ones.productName}}
                      </el-form-item>
                      <el-form-item label="产品名称:">
                        {{ones.productName}}
                      </el-form-item>
                      <el-form-item label="商品分类:">
                        {{ones.categoryId}}
                      </el-form-item>
                      <el-form-item label="市场参考价:">
                        {{ones.marketPrice}}元
                      </el-form-item>
                      <el-form-item label="提供体验数量:">
                        {{ones.productNum}}个
                      </el-form-item>
                      <el-form-item label="选择:">
                        <div style="dispay:flex">
                          <span v-for="(items,i) in ones.attrJson" :key="i" style="margin:0px 15px">
                            {{items.guige}}:
                            <span v-for="(item_b,iss) in items.guigeValue" :key="iss">
                              {{item_b}}
                            </span>
                          </span>
                        </div>
                      </el-form-item>
                      <el-form-item label="活动时间:">
                        {{ones.Times}}
                      </el-form-item>
                      <el-form-item label="申请条件:">
                        <el-row>
                          <el-col :span="8">
                            <span>地区:</span>
                            <span>{{ones.applyCondition.province}}</span>
                            <span>{{ones.applyCondition.city}}</span>
                          </el-col>
                          <el-col :span="8">
                            <span>年龄:</span>
                            <span>{{ones.applyCondition.age}}</span>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="8">
                            <span>职业:</span>
                            <span>{{ones.applyCondition.occupation}}</span>
                          </el-col>
                          <el-col :span="8">
                            <span>性别:</span>
                            <span>{{ones.applyCondition.sex}}</span>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="产品展示图:">
                        <div class="tpzst">
                          <div v-for="tus in ones.tu" :key="tus">
                            <el-image
                              style="width: 150px; height: 150px;margin:0px 10px"
                              :src="tus"
                              fit=fill>
                            </el-image>
                          </div>
                        </div>
                      </el-form-item>
                      <el-form-item label="产品详情图:">
                        <el-image
                            :src="imgUrl"
                             style="width: 150px; height: 150px;margin:0px 10px"
                            fit="fill"></el-image>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div v-if="activityType==2" class="yuansdj">
                    <h4 style="margin:20px 0px">活动详情</h4>
                    <el-form label-width="150px" class="demo-ruleForm">
                      <el-form-item label="活动编码:">
                        {{twos.productName}}
                      </el-form-item>
                      <el-form-item label="产品名称:">
                        {{twos.productName}}
                      </el-form-item>
                      <el-form-item label="商品分类:">
                        {{twos.categoryId}}
                      </el-form-item>
                      <el-form-item label="提供体验数量:">
                        {{twos.productNum}}个
                      </el-form-item>
                      <el-form-item label="活动时间:">
                        {{twos.Times}}
                      </el-form-item>
                      <el-form-item label="竞猜方式:">
                        <el-row>
                          <el-col :span="3">
                            <span v-if="twos.guessType==0">全区间价格</span>
                            <span v-if="twos.guessType==1">固定区间价格</span>
                            <span v-if="twos.guessType==2">趣味竞猜</span>
                          </el-col>
                          <el-col :span="10">
                            <el-input
                              style="width:80px"
                              placeholder="请输入内容"
                              size="medium"
                              v-model="twos.input1"
                              :disabled="true">
                            </el-input>
                            <span>元-</span>
                            <el-input
                              style="width:80px"
                              placeholder="请输入内容"
                              size="medium"
                              v-model="twos.input2"
                              :disabled="true">
                            </el-input>
                            <span>元</span>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="产品展示图:">
                        <div class="tpzst">
                          <div v-for="tus in twos.tu" :key="tus">
                            <el-image
                              style="width: 150px; height: 150px;margin:0px 10px"
                              :src="tus"
                              fit=fill>
                            </el-image>
                          </div>
                        </div>
                      </el-form-item>
                      <el-form-item label="奖品详情图:">
                        <el-image
                            :src="imgUrl"
                             style="width: 150px; height: 150px;margin:0px 10px"
                            fit="fill"></el-image>
                      </el-form-item>
                      <el-form-item label="产品详情图:">
                        <el-image
                            :src="imgUrl"
                             style="width: 150px; height: 150px;margin:0px 10px"
                            fit="fill"></el-image>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div v-if="activityType==3" class="yuansdj">
                    <h4 style="margin:20px 0px">活动详情</h4>
                    <el-form label-width="150px" class="demo-ruleForm">
                      <el-form-item label="活动编码:">
                        {{threes.productName}}
                      </el-form-item>
                      <el-form-item label="产品名称:">
                        {{threes.productName}}
                      </el-form-item>
                      <el-form-item label="商品分类:">
                        {{threes.categoryId}}
                      </el-form-item>

                      <el-form-item label="首发价格:">
                        {{threes.productPrice}}元
                      </el-form-item>
                      <el-form-item label="预定金额:">
                        {{threes.reservePrice}}元
                      </el-form-item>
                      <el-form-item label="预定优惠活动:">
                        <el-row>
                          <el-col :span="3">
                            <span>折扣活动</span>
                          </el-col>
                          <el-col :span="10">
                            <span>折扣200元</span>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="选择:">
                        <div style="dispay:flex">
                          <span v-for="(items,i) in threes.attrJson" :key="i" style="margin:0px 15px">
                            {{items.guige}}:
                            <span v-for="(item_b,iss) in items.guigeValue" :key="iss">
                              {{item_b}}
                            </span>
                          </span>
                        </div>
                      </el-form-item>
                      <el-form-item label="保障:">
                        <el-row>
                          <el-col :span="3" v-if="this.threes.sevenReturn">
                            <span>七天无理由</span>
                          </el-col>
                          <el-col :span="3" v-if="this.threes.freeShipping">
                            <span>包邮</span>
                          </el-col>
                          <el-col :span="3" v-if="this.threes.fake">
                            <span>假一赔四</span>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="产品参数:">
                        <el-col v-for="(mis,indexs) in threes.productParams" :key="indexs">
                          <span style="margin-left:15px;">{{mis.paramKey}}:</span>
                          <span style="margin-right:15px;">{{mis.paramValue}}</span>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="预定时间:">
                        {{threes.Times}}
                      </el-form-item>
                      <el-form-item label="尾款支付时间:">
                        {{threes.Times1}}
                      </el-form-item>
                      <el-form-item label="发货时间:">
                        {{threes.deliveryTime}}
                      </el-form-item>
                      <el-form-item label="产品展示图:">
                        <div class="tpzst">
                          <div v-for="tus in twos.tu" :key="tus">
                            <el-image
                              style="width: 150px; height: 150px;margin:0px 10px"
                              :src="tus"
                              fit=fill>
                            </el-image>
                          </div>
                        </div>
                      </el-form-item>
                      <el-form-item label="产品详情图:">
                        <el-image
                            :src="imgUrl"
                             style="width: 150px; height: 150px;margin:0px 10px"
                            fit="fill"></el-image>
                      </el-form-item>
                    </el-form>
                  </div>
                  <businessF/>
                </div>
              </div>
              
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import jpgs from '@/assets/img/产品详情介绍4.png'
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
import { activity_detail } from '@/apiUrl/busslogin'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        imgUrl:jpgs,
        colors:'#f56c6c',
        activityType:this.$route.query.types,
        //第一块
        ones:{
          productName:"yyyyy",
          categoryId:"鞋靴箱包",
          marketPrice:"399",
          productNum:"5",
          attrJson:[
            {
              guige:"规格",
              guigeValue:['小号','大号']
            },{
              guige:"颜色",
              guigeValue:['黑色']
            },{
              guige:"数量",
              guigeValue:['1000']
            },{
              guige:"价格",
              guigeValue:['399']
            }
          ],
          Times:"2019-11-15——2019-12-01",
          applyCondition:{  //申请条件
            province: "湖北",//省
            city: "武汉",//市
            sex: "女",//性别
            age: "20-24",//年龄
            occupation: "医生",//职业
          },
          tu:[
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
            'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'

          ]
        },
        //第二块
        twos:{
          productName:"yyyyy",
          categoryId:"鞋靴箱包",
          productNum:"5",
          Times:"2019-11-15——2019-12-01",
          guessType:'0',
          input1:'199',
          input2:'2999999',
          tu:[
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
            'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
          ]
        },
        //第三块
        threes:{
          productName:"yyyyy",
          categoryId:"鞋靴箱包",
          marketPrice:"399",
          reservePrice:"100",
          attrJson:[
            {
              guige:"规格",
              guigeValue:['小号','大号']
            },{
              guige:"颜色",
              guigeValue:['黑色']
            },{
              guige:"数量",
              guigeValue:['1000']
            },{
              guige:"价格",
              guigeValue:['399']
            }
          ],
          sevenReturn: 1,//七天无理由退货 0 : 否  1 : 是  
          freeShipping: 1,//包邮  0 : 否  1 : 是  
          fake: 1,//假一赔四  0 : 否  1 : 是 多个用英文逗号隔开
          Times:"2019-11-15——2019-12-01",
          Times1:"2019-11-15——2019-12-01",
          "productParams":[  //产品参数
            {
              "paramKey":"品牌",
              "paramValue":"优嗯",
            },
            {
              "paramKey":"生产日期",
              "paramValue":"2019.12.03",
            },
            {
              "paramKey":"生产厂家",
              "paramValue":"深圳市南山区工业园1号楼",
            },
            {
              "paramKey":"保质期期",
              "paramValue":"2025.01.02",
            },
            {
              "paramKey":"材质成分",
              "paramValue":"真皮",
            }
          ],
          tu:[
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
            'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'

          ]

        }
        
      }
      
    },
    mounted(){
      this.detaildata()
    },
    methods: {
      detaildata(){
        var ax={
          activityId:"f62973ce5ae14d7d94bc32d9811ddaa3"//活动编号
        }
        activity_detail(ax).then(res=>{
          console.log(res)
          // console.log(this.ones)
        })

      },
      // 提交
      onetj(){
        alert('提交')
      }
    
    },
}
</script>
<style scoped>
.el-form-item {
    margin-bottom: 10px;
}
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}


.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.yuansdj h4{
  text-align: center;
  font-size: 17px;
}
.conres_hed{
  color: rgb(220, 220, 220);
  font-size: 17px;
  margin: 10px 0px 10px 15px;
}
.conres_hed span{
  margin: 0px 5px;
}
.conres_hed span:nth-child(1){
  color: #000;
}
.conres_active{
  color:rgb(243, 95, 67);
  border:solid 1px rgb(243, 95, 67)
}
.tpzst{
  display: flex;
  flex-wrap: wrap;
	align-content: flex-start;
}

</style>